<template>
  <div :id="'chart' + index" class="gaugeChart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    index: String,
    unit: String,
    val: String,
    type: String
  },
  data() {
    return {
      myChart: null
    }
  },
  computed: {
    range() {
      let { type } = this
      let range = []
      switch (type) {
        case '温度':
          range = [0, 100]
          break
        case '湿度':
          range = [0, 100]
          break
        case '噪音':
          range = [0, 90]
          break
        case '甲醛':
          range = [0, 0.1]
          break
        case 'PM2.5':
          range = [0, 150]
          break
        case 'PM10':
          range = [0, 150]
          break
        default:
          range = [0, 1000]
      }

      return range
    },
    handlerVal() {
      return this.val == '--' ? 0 : this.val
    }
  },

  methods: {
    initChart() {
      let { unit, handlerVal } = this
      let min = this.range[0]
      let max = this.range[1]
      var option = {
        // color:['#ffffff'],

        title: {
          // text: handlerVal,
          subtext: unit,
          left: "center",
          top: "47%",
          textStyle: {
            fontSize: 26,
            color: "#fff"
          },
          subtextStyle: {
            fontSize: 14,
            color: "#ffffff80"
          }
        },
        tooltip: {
          formatter: '{c}{b}',
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0)',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            center: ['50%', '50%'],
            radius: '90%',
            startAngle: 210,
            endAngle: -30,
            clockwise: true,
            min,
            max,
            splitNumber: 4,
            title: {
              show: false
            },
            axisLine: {
              show: true
            },
            axisLabel: {
              show: true,
              color: '#fff',
              distance: 12.5,
              fontSize: 8
            },
            axisTick: {
              lineStyle: {
                color: '#fff'
              },
              length: '5%',
              distance: 5
            },
            splitLine: {
              lineStyle: {
                color: '#fff',
                width: 2
              },
              length: '10%',
              distance: 5
            },
            pointer: {
              icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
              length: '105%',
              width: 8,
              offsetCenter: [0, '5%'],
              itemStyle: {
                color: 'rgba(22, 245, 245, 0.8)'
              }
            },
            progress: {
              width: 40,
              // roundCap: true,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0.8,
                  y: 0.5,
                  x2: 0,
                  y2: 1,
                  // type: 'radial',
                  // x: 1,
                  // y: 0.2,
                  // r: 2,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FF002A95' // 0% 处的颜色
                    },
                    {
                      offset: 0.2,
                      color: '#FF792495'
                    },
                    {
                      offset: 0.4,
                      color: '#F5DD3895'
                    },
                    {
                      offset: 0.6,
                      color: '#53FF7E95'
                    },
                    {
                      offset: 0.8,
                      color: '#00EFD795'
                    },
                    {
                      offset: 1,
                      color: '#009BE695' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              },
              show: true
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 10,
                color: [
                  [1, '#00ffff90'] // 0~10% 红轴
                  // [0.2, 'green'], // 10~20% 绿轴
                  // [0.3, 'blue'], // 20~30% 蓝轴
                  // ...
                ],
                shadowBlur: 1.5,
                shadowColor: "#ffffff40"
              }
            },
            name: 'Pressure',
            type: 'gauge',
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: handlerVal,
                name: '优',
                title: {
                  show: true,
                  color: '#00ffff',
                  offsetCenter: [0, '80%'],
                  fontSize:20,
                  fontWeight: "bold"
                },
                detail: {
                  show: false,
                  color: '#ffffff'
                  // textBorderWidth: 1.6,
                  // textBorderColor: "#00ffff",
                },
                itemStyle: {
                  shadowColor: '#ffffff75',
                  shadowBlur: 5,
                  shadowOffsetX: 1,
                  shadowOffsetY: 1
                }
              }
            ]
          },
          //里面的圈
          {
            type: 'gauge',
            center: [
              '50%',
              '50%'
            ],
            radius: '40%', // 1行3个
            splitNumber: 10,
            min: 0,
            max: 100,
            startAngle: 0,
            endAngle: 360,
            axisLine: { // 坐标轴线
              roundCap: true,
              lineStyle: {
                width: 1000,
                color: [
                  [1, '#003d98'] // 0~10% 红轴
                  // [0.2, 'green'], // 10~20% 绿轴
                  // [0.3, 'blue'], // 20~30% 蓝轴
                  // ...
                ],
                shadowBlur: 1.5,
                shadowColor: "#ffffff40"
              }
              // lineStyle: { // 属性lineStyle控制线条样式
              //   color: colorStyle,
              //   fontSize: 20,
              //   width: 1000,
              //   opacity: 1, //刻度背景宽度
              // }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisTick: {
              show: false
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              offsetCenter: [0, '-22%']
            },
            data: [
              {
                value: handlerVal,
                name: unit,
                title: {
                  show: false,
                  color: '#00ffff',
                  offsetCenter: [0, '30%']
                },
                detail: {
                  show: true,
                  color: '#ffffff',
                  fontSize: 26,
                  // textBorderWidth: 1.6,
                  // textBorderColor: "#00ffff",
                },
                itemStyle: {
                  shadowColor: '#ffffff75',
                  shadowBlur: 5,
                  shadowOffsetX: 1,
                  shadowOffsetY: 1
                }
              }
            ]
          },
        ]
      }
      this.myChart.setOption(option)
    }
  },

  mounted() {
    this.myChart = echarts.init(document.getElementById('chart' + this.index))
    this.initChart()
    window.addEventListener('resize', () => this.myChart.resize())
  }
}
</script>


<style lang="less" scoped>
.gaugeChart {
  width: 100%;
  height: 100%;
}
</style>
